<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值）、年龄（单值）、爱好（数组）、
		女朋友（对象）、豪车（对象数组）</h3>
		<div id="app" v-cloak>
		{{msg}}、
		<hr >
		{{name}}、
		<hr >
		{{age}}、
		<hr >
		{{hobby}}、{{hobby[0]}}、{{hobby[hobby.length-1]}}、
		<hr >
		{{girl.name}}、{{girl.age}}、{{girl}}
		<hr >
		{{cars[0].name}}、{{cars[0].color}}<br>
		{{cars[2].color}}、{{cars[2].name}}<br>
		{{cars}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				msg: "hello VueJS!",
				name:"青山",
				age:20,
				hobby:["篮球","游戏","跑步"],
				girl:{
					name:"晗",
					age:20
				},
				cars:[{
					name:"宝马",
					color:"blue"
					},{
					name:"奔驰",
					color:"black"
					},{
					name:"奥迪",
					color:"white"
				}]
				
			}
		});
	</script>
</html>
